<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style type="text/css">
        .clear:after {
            clear: both;
            content: '';
            display: block;
            width: 0;
            height: 0;
            visibility: hidden;
        }
        ul{
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        .test{
            padding-top: 20px;
            background:url("img/2.png");
        }
        .left{
            width: 20%;
            float: left;
        }
        .right{
            width: 70%;
            float: left;
            margin-left: 50px;
        }
        .title>span{
            display: inline-block;
            color: white;
            font-size: 30px;
            margin-top: 15px;
        }
        .title{
            height: 70px;
            text-align: center;
            background-color: #BE975B;
            position: relative;
        }
        .title_red{
            width: 10px;
            height: 70px;
            background-color: #DD231F;
            position: absolute;
        }
        .daohang{
            text-align: center;
        }
        .new1{
            width: 180px;
            background-color: #E1E1E1;
            text-align: center;
            height: 40px;
            display: inline-block;
            margin-top: 10px;
        }
        .new2{
            display: inline-block;
            width: 180px;
            height: 40px;
            background-color: #DC241C;
            text-align: center;
            margin-top: 10px;
        }
        .new1>div,.new2>div{
            margin-top: 6px;
        }
        .new1>div>span,.new2>div>span{
            padding-left: 20px;
        }
        .span1{
            color: black;
            font-size: 20px;
        }
        .span2{
            color: white;
            font-size: 20px;
        }
        .glyphicon{
            color: white;
        }
        .new_img>div{
            display: inline-block;
            padding-top: 20px;
        }
        .new_img>div>img{
            border-radius: 45px
        }
        .new3>h3{
            display: inline-block;
        }
        .new3>span{
            position: relative;
            left: 440px;
        }
        .right>hr{
            border: 3px #C22B27 solid;
            background-color: #C22B27;
        }
        .detail>div{
            width: 650px;
            float: right;
        }
        .detail>hr{
            border: 1px silver dotted;
            margin-top: 50px;
        }
        .detail{
            position: relative;
        }
        .span3{
            color: #C5A471;
            font-size: larger;
            position: absolute;
            left: 650px;
            top: 5px;
        }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
<div class="test clear container">
    <div class="left">
        <div class="title">
            <div class="title_red"></div>
            <span>人力资源</span>
        </div>
        <div class="daohang">
            <div class="news">
                <div class="new1">
                    <div>
                        <span class="span1">公司新闻</span>
                        <span class="glyphicon glyphicon-play"></span>
                    </div>
                </div>
                <div class="new2">
                    <div>
                        <span class="span2">行内新闻</span>
                        <span class="glyphicon glyphicon-play"></span>
                    </div>
                </div>

                <div class="new_img">
                    <div>
                        <img src="img/qxyw_03.png">
                        <p>资产管理</p>
                    </div>
                    <div>
                        <img src="img/qxyw_03.png">
                        <p>投资管理</p>
                    </div>
                    <div>
                        <img src="img/qxyw_03.png">
                        <p>融资投股</p>
                    </div>
                    <div>
                        <img src="img/qxyw_03.png">
                        <p>投资基金</p>
                    </div>
                    <div>
                        <img src="img/qxyw_03.png">
                        <p>投资实业</p>
                    </div>
                    <div>
                        <img src="img/qxyw_03.png">
                        <p>投资咨询</p>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="right">
        <div class="new3">
            <h3>行内新闻</h3>
            <span>您现在的位置：首页>新闻咨询><span style="color: #C5A471">行业新闻</span></span>
        </div>
        <hr>
        <div class="detail clear">
            <img src="img/lbxtu.png">
            <div>
                <h4>中小型企业技术创新基金项目预申报工作的通知</h4>
                <p>栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，
                    并且针对小屏幕设备覆盖栅格类。
                    因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，
                    并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在，
                    也影响大屏幕设备</p>
            </div>
            <hr>
            <span class="span3">【2014-10-25】</span>
        </div>

        <div class="detail clear">
            <img src="img/lbxtu.png">
            <div>
                <h4>中小型企业技术创新基金项目预申报工作的通知</h4>
                <p>栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，
                    并且针对小屏幕设备覆盖栅格类。
                    因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，
                    并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在，
                    也影响大屏幕设备</p>
            </div>
            <hr>
            <span class="span3">【2014-10-25】</span>
        </div>

        <div class="detail clear">
            <img src="img/lbxtu.png">
            <div>
                <h4>中小型企业技术创新基金项目预申报工作的通知</h4>
                <p>栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，
                    并且针对小屏幕设备覆盖栅格类。
                    因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，
                    并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在，
                    也影响大屏幕设备</p>
            </div>
            <hr>
            <span class="span3">【2014-10-25】</span>
        </div>
    </div>
</div>
</body>
</html>